<template>
  <div class="container">
    <div>
      <h1 class="user-info">冰箱列表</h1>
    </div>

    <!-- 列表部分 -->
    <div>
      <div>
        <a-table
      row-key="id"
      :loading="loading"
      :pagination="pagination"
      :data="fidgelist"
      :bordered="false"
    >
      <template #columns>
        <a-table-column :title="$t('冰箱ID')" data-index="title" />
        <a-table-column :title="$t('用户名')" data-index="users" />
        <a-table-column :title="$t('用户身份')" data-index="role" />
        <a-table-column :title="$t('最近登录时间')" data-index="regist_time" />
        <a-table-column :title="$t('操作')" data-index="operations">
          <template #cell="row">
            <a-button
              @click="reviseList(row)"
              v-permission="['admin']"
              type="text"
              size="small"
            >
              {{ $t('编辑') }}
            </a-button>
            <a-popconfirm
              @ok="delList(row)"
              content="Are you sure you want to delete?"
              type="error"
            >
              <a-button v-permission="['admin']" type="text" size="small">
                {{ $t('删除') }}
              </a-button>
            </a-popconfirm>
          </template>
        </a-table-column>
      </template>
    </a-table>
      </div>
    </div>
    <div v-show="visible" class="a-mask">
      <div class="addClassIpt">
        <AddClass @confirmfun="confirmfun" @cancelfun="cancelfun"></AddClass>
      </div>
    </div>
    <div v-show="visible_revise" class="a-mask">
      <div class="addClassIpt">
        <ReviseClass @confirmFun_revise="confirmFun_revise" @cancelFun_revise="cancelFun_revise" v-bind:row_="row_">
        </ReviseClass>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive } from 'vue';
export default {
  setup() {
    const fidgelist = reactive([
      {
        title: '1',
        users: '王一',
        role: '自己',
        regist_time: '2023/4/19',
      },
      {
        title: '2',
        users: '王二',
        role: '弟弟',
        regist_time: '2023/4/19',
      },
      {
        title: '3',
        users: '王三',
        role: '妹妹',
        regist_time: '2023/4/19',
      },
      {
        title: '4',
        users: '王四',
        role: '小弟',
        regist_time: '2023/4/19',
      },
      {
        title: '5',
        users: '王五',
        role: '小妹',
        regist_time: '2023/4/19',
      },
    ]);

    return {
      fidgelist,
    };
  },
};
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 40px 20px;
  background-color: var(--color-bg-2);
  overflow: hidden;
  height: 100%;
}

.searchbutton {
  margin-left: 84px;
}

.linemarginleft {
  margin-right: 37px;
}

.linemarginright {
  margin-left: 37px;
}

.addclassbtn {
  margin-top: 28px;
  margin-bottom: 24px;
  margin-left: 5px;
}

.a-mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;

  .addClassIpt {
    width: 700px;
    height: 400px;
    background-color: rgb(255, 255, 255);
    margin: auto;
    margin-top: 120px;
    padding-top: 10px;
    padding-left: 10px;
    border-radius: 20px;
  }

}

.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;

  .addClassIpt {
    width: 700px;
    height: 350px;
    background-color: rgb(255, 255, 255);
    margin: auto;
    margin-top: 120px;
    padding-top: 10px;
    padding-left: 10px;
    border-radius: 20px;
  }

}

.user-info {
  margin-left: 20px;
}

.user-bar {
  margin-left: 20px;
}

.user-reset {
  margin-left: 1205px;
}

.user-research {
  margin-left: 10px;
}
</style>